<template>
  <div style="height:100vh;overflow:hidden;
  background-image:url('/imgs/login/login.webp');
  background-size: cover;"
  >
    <el-container :direction="'vertical'">w
      <el-header height="60px">
        <!-- Header content -->
      </el-header>
      <el-main>
        <el-row :gutter="20">
          <el-col :span="8" :offset="0"></el-col>
          <el-col :span="8" :offset="0">
            <el-card style="margin-top: 80px;position: relative;
            background: rgba(255, 255, 255, 0.7);border: 1px solid rgba(255, 255, 255, 0.2);">
              <h1 style="text-align: center;">用户登录</h1>
              <el-form label-position="top">
                <el-form-item label="用户名">
                  <el-input placeholder="请输入用户名" v-model="user.username" ></el-input>
                </el-form-item>
                <el-form-item label="密码" size="normal">
                  <el-input placeholder="请输入密码" show-password v-model="user.password"></el-input>
                </el-form-item>
                <el-form-item style="margin-top: 30px;">
                  <el-button type="primary" size="default" style="width:50%;margin:0 auto;" @click="login">登录</el-button>
                </el-form-item>
                <el-form-item style="margin-top: 30px;">
                  <el-link href="/relogin" @click="remove" target="_self" >注册账户</el-link>
                  <el-link href="#" target="_self" style="position:absolute;right: 0;">忘记密码</el-link>
                </el-form-item>
              </el-form>
            </el-card>
        </el-col>
        <el-col :span="8" :offset="0"></el-col>
        </el-row>



      </el-main>
    </el-container>
  </div>
</template>

<script setup>

import router from '@/router';
import axios from 'axios';
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import qs from 'qs';

// 定义对象用来保存登录表单数据
const user = ref({
  username: '',
  password: ''
})


const login = () => {
  // console.log(user.value)
  if (user.value.username == 'admin' || user.value.password == 'admin') {
    localStorage.setItem('user',JSON.stringify(user.value));
    router.push('/admin')
    return;
  }
  let data = qs.stringify(user.value);
  axios.get(BASE_URL+'/v1/user/select?'+data).then(response => {
    if(response.data.code === 2000){
      localStorage.setItem('user',JSON.stringify(response.data.data));
      if(response.data.data.status == '0'){
        ElMessage.warning('账户被封禁')
        return;
      }
      ElMessage.success('登录成功')
      router.push('/')
    }else{
      ElMessage.error(response.data.msg)
      user.value ={username:'',password:''}
    }
})
}
const remove = () => {
  localStorage.removeItem('user');
}

// 定义登录方法
</script>

<style scoped>
/* 样式内容 */
</style>
